---
import { getLanguageFromURL } from '../../languages';
import { SIDEBAR, Sidebar } from '../../config';
import groupBy from 'lodash/groupBy';
import sortBy from 'lodash/sortBy';
import mapValues from 'lodash/mapValues';
import merge from 'lodash/merge';
const pages = await Astro.glob('../../pages/**/*.{mdx,md}');

const localizedPages = groupBy(
  sortBy(
    pages
      .map(p => ({
        link: p.url,
        text: p.frontmatter.name || p.frontmatter.title,
        header: p.frontmatter.header,
        order: p.frontmatter.order ?? 1,
        ogLocale: p.frontmatter.ogLocale ?? 'en',
      }))
      .filter(p => p.text && p.header),
    'order'
  ),
  'ogLocale'
);

const { currentPage } = Astro.props as Props;
const langCode = getLanguageFromURL(currentPage);
const sideBarFromPages = mapValues(groupBy(localizedPages[langCode] || localizedPages['en'], 'header'), d => ({
  items: d,
}));
type Props = {
  currentPage: string;
};

const sidebar = merge({}, sideBarFromPages, SIDEBAR[langCode]);
const sortedSiderbar = sortBy(Object.entries(sidebar), ([_, { order }]) => order ?? 10).filter(
  h => h?.[1]?.items?.length > 0
);
---

<nav aria-labelledby="grid-left">
  <ul class="nav-groups">
    {
      sortedSiderbar.map(([header, { items }]) => (
        <li>
          <div class="nav-group">
            <h2 class="heading">{header}</h2>
            <ul>
              {items.map(child => {
                const url = child.link;
                return (
                  <li class="nav-link">
                    <a href={url} aria-current={currentPage === child.link ? 'page' : false}>
                      {child.text}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>
        </li>
      ))
    }
  </ul>
</nav>

<script is:inline>
  window.addEventListener('DOMContentLoaded', () => {
    var target = document.querySelector('[aria-current="page"]');
    if (target && target.offsetTop > window.innerHeight - 100) {
      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
    }
  });
</script>

<style>
  nav {
    width: 100%;
    margin-right: 1rem;
  }

  .nav-groups {
    height: 100%;
    padding: 2rem 0;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 100vh;
  }

  .nav-groups > li + li {
    margin-top: 2rem;
  }

  .nav-groups > :first-child {
    padding-top: var(--doc-padding);
  }

  .nav-groups > :last-child {
    padding-bottom: 2rem;
    margin-bottom: var(--theme-navbar-height);
  }

  .nav-group-title {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.1rem 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .nav-link a {
    font-size: 1rem;
    margin: 1px;
    padding: 0.3rem 1rem;
    font: inherit;
    color: inherit;
    opacity: 0.8;
    text-decoration: none;
    display: block;
  }

  .nav-link a:hover,
  .nav-link a:focus {
    background-color: var(--theme-bg-hover);
  }

  .nav-link a[aria-current='page'] {
    color: var(--theme-text-accent);
    background-color: var(--theme-bg-accent);
    font-weight: 600;
  }

  @media (min-width: 50em) {
    .nav-groups {
      padding: 0;
    }
  }
</style>

<style is:global>
  :root.theme-dark .nav-link a[aria-current='page'] {
    color: hsla(var(--color-base-white), 100%, 1);
  }
</style>
